<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>产品首页</title>
	<script src="../../js/layui/layui.js"></script>
	<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all" />
	<style type="text/css">
		.layui-table-cell{
		     height: auto!important;
		     white-space: normal;
		}
	</style>
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote news_search">
		<div class="layui-form-item" style="margin-top: 10px; margin-left: 10px">
			<form class="layui-form" method="post" onsubmit="return false;">
				<label class="layui-form-mid">产品名:</label>
				<div class="layui-input-inline" >
					<input type="text" id="proName" name="p_name" placeholder="请输入产品名"
						autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">价格:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="minShop" id="min" placeholder="输入最低价"
						autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="maxShop" id="max" placeholder="输入最高价"
						autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">产品类型:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select id="productType" name="productcat_id">
					
					</select>
				</div>
				<div class="layui-inline">
					<button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
				</div>
				<div class="layui-inline">
					<a class="layui-btn layui-btn-normal newsAdd_btn" onclick="addPro()">添加产品</a>
				</div>
			</form>
		</div>
	</blockquote>
	<table class="layui-table" lay-filter="test" id="demo" lay-filter="table"></table>
	<script type="text/javascript">
		var json;
		layui.use(['table','form','layer'], function(){
		  var table = layui.table;
		  var form = layui.form;
		  var layer = layui.layer;
		  var $ = layui.$;
		  
		  //动态化类型
		  $.post('http://localhost:8080/FiveClothes/productCat/allType',function(res){
			  if(res!=null){
				  $("#productType").empty();
				  $("#productType").append(new Option("请选择",""));
				  $.each(res,function(index,item){
					  $("#productType").append(new Option(item.catname,item.productcat_id));
				  });
			  }else {
				  $("#productType").append(new Option("暂无数据",""));
			  }
			  form.render();
		  },'json');
		  
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    //,height: 300
		    ,url: 'http://localhost:8080/FiveClothes/findPro' //数据接口
		    ,page: true //开启分页
		    ,limits:[2,3,4]
		    ,cols: [[ //表头
		      {field: 'p_id', title: 'ID',width:60, align:'center'}
		      ,{field: 'p_name', title: '产品名称', align:'center'}
		      ,{field: 'catname', title: '类别名称',width:100, align:'center'}
		      ,{field: 'p_nowprice', title: '价格', align:'center'}
		      //,{field: 'p_details', title: '商品详情', align:'center'}
		      ,{field: 'p_stock', title: '库存', align:'center'}
		      ,{field: 'p_img', title: '图片', width:150, templet:'<div><img src="../../../images/{{ d.p_img }}"></div>', align:'center'}
		      ,{field: 'p_put', title: '是否上架', align:'center',templet:'#statusTemp'}	
		      //,{field: 'p_weight', title: '权重',width:60, align:'center'}
		      ,{field: 'p_shopurl', title: '商品链接', align:'center'}
		      ,{field: 'right', align:'center',toolbar:'#barDemo',width:300}
		    ]]
		    ,id:'idTest'
		  });
		  
		  form.on('submit(formDemo)', function(data){
			  table.reload('idTest', {
				  where:data.field
				  ,page: {
	                    curr: 1 //重新从第 1 页开始
	                  }
				});
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		  
		//上架开关按钮
		  form.on('switch(isState)', function(obj){
			  var state = this.checked ? '0' : '1';	//点击后获取到开关的状态
			  console.log("onoff:" + state, "p_id:" + this.value);
			  console.log(typeof state);
		  	  $.post('http://localhost:8080/FiveClothes/statePro',{"p_id" : this.value, "state" : state},
		  			  function(data){
		  				console.log(data);
				  		if (data) {
				  			console.log(data);
			                layer.msg("商品已上架");
			            } else {
			            	layer.msg("商品已下架");
			            }
		  	  },'json');
		  });
		
		  //编辑and删除
		  table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			    var data = obj.data; //获得当前行数据
			    var layEvent = obj.event; //获得 lay-event 对应的值
			    sessionStorage.setItem(
						"product",
						JSON.stringify(data));
			    
			    if(layEvent === 'del'){ //删除
			     layer.confirm('真的删除行么', function(index){
			    	  $.post('http://localhost:8080/FiveClothes/delPro',{"p_id":data.p_id},
							  function(res){
			    		  			var msg;
						  			if(res){
						  				msg="删除成功"
						  			}else{
						  				msg="删除失败"
						  			}
						  			layer.msg(msg, {
							  			  icon: 1,
							  			  time: 2000 //2秒关闭（如果不配置，默认是3秒）
							  			}, function(){
											 window.location.reload();//刷新父页面
							  			}); 
						  			 
						  },'json');
			    	  layer.close(index);
			      });
			    } else if(layEvent === 'edit'){ //编辑
			    	json = JSON.stringify(data);
			    	//console.log(json);
			    	layer.open({
						 type: 2, 
						 content: 'productUpdate.html',
						 area: ['500px','500px']
					}); 
			    } else if(layEvent === 'imgAdmin'){ //图片管理
			    	json = JSON.stringify(data);
			    	console.log(json);
			    	layer.open({
						 type: 2, 
						 content: 'productImgADD.html',
						 maxmin:true,
						 area: ['500px','500px']
					}); 
			    }
			  });
		  
		
		});
		
		//添加产品
		function addPro(){
			layer.open({
			 type: 2, 
			 content: 'productAdd.html',
			 maxmin:true,
			 area: ['500px','500px'] 
			}); 
		}
	 </script>
	 <script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-mini" lay-event="imgAdmin">图片管理</a>
  		<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="statusTemp">
		<input type="checkbox" lay-skin="switch" value={{d.p_id}} lay-filter="isState"  lay-text="上架|未上架" {{ d.state== "0" ? "checked" : "" }}>
	</script>
</body>
</html>